<template>
  <div class="table-main-box">
    <el-table
      :data="tableData"
      @header-click="clickTableHead"
      row-key="procode"
      border
      style="width: 100%"
      height="100%"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
      @row-click="clickProject"
    >
    <el-table-column
      align="center"
      prop="code"
      label="证书编号"
      width="100px"
      />
    <el-table-column
      align="center"
      prop="shortname"
      label="证书简称"
      >
    <template slot-scope="scope">
     <div class="short-name-box" >{{ scope.row.shortname ? scope.row.shortname : ' ' }}</div>
    </template>
    </el-table-column>
      <el-table-column
          align="center"
          prop="typename"
          label="证书类型"
          width="100px"
        />
        <el-table-column
          align="center"
          prop="remark"
          label="主要内容"
        />
        <el-table-column
          align="center"
          prop="participant"
          label="证书所属人"
        />
        <!-- <el-table-column
          align="center"
          prop="validtime"
          label="有效期"
          width="120px"
        >
      <template slot-scope="scope">
             <div>{{ scope.row.validtime ? scope.row.validtime : ' ' }}</div>
            </template>
      </el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="guid"
          width="200px"
          label="预览"
        >
      <template slot-scope="scope">
        <div class="preview-img">
            <img :src="scope.row.thumbnail ? scope.row.thumbnail : 'https://th.bing.com/th/id/R.48c10ea51942114a7525d31d13bda857?rik=e3ysWXnnL3YedQ&riu=http%3a%2f%2fimg75.chem17.com%2f8%2f20201029%2f637395764275127570941.jpg&ehk=TOE92UBNgSj2ERT48cV9kOUizBtAJcS7Ob4T3J03q58%3d&risl=&pid=ImgRaw&r=0'" alt="">
        </div>
      </template>
      </el-table-column> -->
      <el-table-column
            align="center"
            prop="gettime"
            label="下证日期"
          >
        <template slot-scope="scope">
               <div>{{ scope.row.gettime ? scope.row.gettime.split('T')[0] : ' ' }}</div>
              </template>
        </el-table-column>
        <el-table-column
              align="center"
              prop="finishtime"
              label="有效开始日期"
            >
          <template slot-scope="scope">
                   <div>{{ scope.row.begintime ? scope.row.begintime.split('T')[0] : ' ' }}</div>
                  </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="finishtime"
            label="有效截止日期"
          >
        <template slot-scope="scope">
                 <div>{{ scope.row.finishtime ? scope.row.finishtime.split('T')[0] : ' ' }}</div>
                </template>
        </el-table-column>
        <el-table-column
              align="center"
              label="标签"
              width="200px"
            >
          <template slot-scope="scope">
              <div class="labels-box">
                <div v-if="scope.row.tag" class="tag-item">{{ scope.row.tag }}</div><div class="add-label" @click="addLabel(scope.row)"><i class="el-icon-plus"></i></div>
              </div>
          </template>
          </el-table-column>
        <el-table-column
            align="center"
            prop="finishtime"
            label="附件"
            width="100px"
          >
        <template slot-scope="scope">
            <el-button type="success" @click="handAnnex(scope.row)"
              >附件</el-button
            >
           
          </template>
        </el-table-column>
      <el-table-column align="center" width="160" label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="updateItem(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="deleteItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      title="添加标签"
      width="15%"
    >
    <div class="tag-box">
          <el-select
                class="file-type-select files-type-input"
                style="width: 100%;"
                v-model="tagId"
                filterable 
                allow-create
                popper-class="file-type-box"
                placeholder="请选择标签"
              >
                <el-option v-for="(item, index) in tageOption" :key="index" :label="item.tagname" :value="item.tagname"></el-option>
              </el-select>
        </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="subAddTag">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { deleteDetailDataApi, getTagApi, updateDetailDataApi } from '@/api/index'
export default {
  
  props: {
    tableData: {
      type: Array,
      default: null
    }, 
    sortArr: {
      type: Array,
      default: null
    }, 
    openAnnex: {
      type: Function,
      default: null
    },
    openDetail: {
      type: Function,
      default: null
    }, 
    openUpdate: {
      type: Function,
      default: null
    }, 
    getAnnexListData: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      tableStyle: {
        background: 'none',
        width: '150px'
      },
      headerStyle: {
        color: 'black',
        fontSize: '16px'
      },
      openInfo: true,
      dialogVisible: false,
      tageOption: [],
      tagId: '',
      addTagItem: {}
    }
  },
  mounted () {
    this.getTage()
  },
  methods: {
    // 获取标签
    async getTage () {
      let data = {
        skipcount: 0,
        maxresultcount: 99999
      }
      let res = await getTagApi(data)
      this.tageOption = [ ...res.tags ]
      console.log('标签数据源--->', this.tageOption)
    }, 

    clickProject (row, column, event) {
      if (!this.openInfo) return
      this.openDetail(row)
    },

    // 点击表头
    clickTableHead (column, event) {
      console.log('点击表头---->', column, event)
      this.sortArr.forEach(item => {
        if (item.sortBy === column.label) {
          item.isForward = !item.isForward
        }
      })
      let data = {
        skipcount: 0,
        maxresultcount: 10
      }
      this.getAnnexListData(data)
      console.log('点击表头---->', this.sortArr)
    },

    showDetail (row) {
      console.log('展示详情------>', row)
      this.openDetail(row)
      this.setOpenInfo()
    },

    // 添加标签
    addLabel (row) {
      this.dialogVisible = true
      this.openInfo = false
      this.addTagItem = { ...row }
      console.log('添加标签---->', this.dialogVisible)
    },
    // 提交添加
    async subAddTag () {
      this.dialogVisible = false
      let data = {
        ...this.addTagItem
      }
      data.tag = this.tagId
      let res = await updateDetailDataApi(data)
      console.log('添加标签---->', res)
      if (res === '更新记录信息成功') {
        this.$message({
          type: 'success',
          message: '添加成功! '
        })
      } else {
        this.$message({
          type: 'error',
          message: '添加失败!'
        })
      }
    },

    // 附件按钮
    handAnnex (row) {
      this.openInfo = false
      this.openAnnex(row)
      this.setOpenInfo()
    },
    // 编辑某项
    updateItem (row) {
      this.openInfo = false
      this.openUpdate(row)
      this.setOpenInfo()
    },
    //  删除某项
    deleteItem (row) {
      this.openInfo = false
      this.$confirm('此操作将永久删除该记录, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDetailDataApi({ guid: row.guid }).then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            let params = {
              skipcount: 0,
              maxresultcount: 10
            }
            this.getAnnexListData(params)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    setOpenInfo () {
      setTimeout(() => {
        this.openInfo = true
      }, 1000)
    }
  }
}
</script>

<style lang="scss" >
.table-main-box {
  height: 100%;

  /* border: 1px solid red; */
  .preview-img {
    width: 100%;
    height: 80px;
    >img {
      width: 100%;
      height: 100%;
    }
  }
  .short-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;

    /* border: 1px solid red; */
  }
  .labels-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;

    /* border: 1px solid red; */
    .tag-item {
      display: flex;
      align-items: center;
      height: 18px;
      margin-right: 5px;
      padding: 0 3px;
      color: #1e9aec;
      font-size: 10px ;
      border: 1px solid#1e9aec;

      /* border: 1px solid red; */
      border-radius: 5px;
    }
    .add-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background-color: #eef0ee;
      border-radius: 5px;
      &:hover {
        background-color: #eef0ee34;
        cursor: pointer;
      }
    }
  }
}
.el-table {
  /* border: 1px solid red; */

  /* background: #f5f6fa; */
}
.has-gutter > tr > :last-child {
  /* background: red; */
}
.el-table__row:hover {
  cursor: pointer;
}
.el-table__body {
  margin-right: 0 !important;
}
.el-table__body-wrapper {
  overflow-y: hidden;
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgb(213 215 220 / 30%);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}
.el-table th.gutter {
  display: none;
  width: 0;
}
.el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}
.el-table__body {
  width: 100% !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
  display: none;
  width: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: fade(rgb(78 182 214), 60%);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  opacity: 0.2;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  background: fade(rgb(78 182 214), 30%);
  border-radius: 0;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
}
.el-table__body tr.current-row > td {
  background-color: #d0d3d0 !important;
}
</style>